<template>
	<div>
		<el-card class="box-card" v-loading="loading" element-loading-background="rgba(255,255,255, 0.5)">
      <div slot="header" class="clearfix header">
        <span class="header-teaching"><i class="el-icon-tickets"></i>&nbsp;&nbsp;教案 <i class="el-icon-arrow-right"></i></span>
        <span class="head">{{teacherPlan.motion}}</span>
        <div style="float: right;" type="text" class="back" @click="back">返回</div>
			</div>
			<div class="top-teaching">
        <span class="head">教案名称：<span class="head-content">{{teacherPlan.motion}}</span></span>
        上课班级：<span  class="top-grade">{{gradeClass}}  {{semester}}  第{{mark}}节课</span>
        <button class="top-homework" @click="submit">完成备课</button>
			</div>
			<div class="text item">
				<form @submit.prevent="submit" id="test">
					<input type="hidden" name="one_img" id="one_img" :value="img">
					<input type="hidden" name="two_img" id="two_img" :value="img2">
					<input type="hidden" name="three_img" id="three_img" :value="img3" >
					<el-collapse v-model="activeName">
						<el-collapse-item title="基本信息" name="1" class="text-title">
							<div>
								<h4><span class="circle"></span>教学内容</h4>
								<textarea name="contents" rows="5" cols="186" style= "background:transparent">{{teacherPlan.contents}}</textarea>
							</div>
							<div>
								<h4><span class="circle"></span>场地器材</h4>
								<textarea name="equipment" rows="5" cols="186" style= "background:transparent">{{teacherPlan.equipment}}</textarea>
							</div>
							<div>
								<h4><span class="circle"></span>教学目标</h4>
								<textarea name="target" rows="5" cols="186" style= "background:transparent">{{teacherPlan.target}}</textarea>
							</div>
							<div>
								<h4><span class="circle"></span>负荷目标</h4>
								<textarea name="load_target" rows="5" cols="186" style= "background:transparent">{{teacherPlan.load_target}}</textarea>
							</div>
							<div>
								<h4><span class="circle"></span>教学重点</h4>
								<textarea name="teaching_emphasis" rows="5" cols="186" style= "background:transparent">{{teacherPlan.teaching_emphasis}}</textarea>
							</div>
							<div>
								<h4><span class="circle"></span>教学难点</h4>
								<textarea name="difficulty" rows="5" cols="186" style= "background:transparent">{{teacherPlan.difficulty}}</textarea>
							</div>
							<div>
								<h4><span class="circle"></span>安全措施</h4>
								<textarea name="security" rows="5" cols="186" style= "background:transparent">{{teacherPlan.security}}</textarea>
							</div>
						</el-collapse-item>
						<el-collapse-item title="教学阶段-开始部分" name="2">
							<div id="start" v-for="item in teacherPlan.start_part">
								<div class="someTime">
									<span class="time">总时长:</span>
									<input name="one_count_minute" type="text" class="title" v-model="teacherPlan.one_count_minute">
									<span class="time">分钟</span>
								</div>
								<div class="div_child">
									<div>
										<h4 class="text-content">标题</h4>
										<input name="one_title[]" type="text" class="title" v-model="item.one_title">
									</div>
									<div>
										<h4><span class="circle"></span>教学内容</h4>
										<textarea name="one_contents[]" cols="186" rows="5" style= "background:transparent">{{item.one_contents}}</textarea>
									</div>
									<div>
										<h4><span class="circle"></span>教师活动</h4>
										<textarea name="one_activity[]" rows="5" cols="186" style= "background:transparent">{{item.one_activity}}</textarea>
									</div>
									<div>
										<h4><span class="circle"></span>学生活动</h4>
										<textarea name="one_s_activity[]" rows="5" cols="186" style= "background:transparent">{{item.one_s_activity}}</textarea>
									</div>
									<div>
										<h4><span class="circle"></span>组织形式</h4>
										<div class="tupian2"><img :src="item.one_img"/></div>
									</div>
								</div>
							</div>
						</el-collapse-item>
						<el-collapse-item title="教学阶段-准备部分" name="3">
							<div id="preparation" v-for="item in teacherPlan.preparation_part">
								<div class="someTime">
									<span class="time">总时长:</span>
									<input name="two_count_minute" type="text" class="title" v-model="teacherPlan.two_count_minute">
									<span class="time">分钟</span>
								</div>
								<div class="div_child">
									<h4 class="text-content">标题</h4>
									<input name="two_title[]" type="text" class="title" v-model="item.two_title">
								</div>
								<div>
									<h4><span class="circle"></span>教学内容</h4>
									<textarea name="two_contents[]" cols="186" rows="5" style= "background:transparent">{{item.two_contents}}</textarea>
								</div>
								<div>
									<h4><span class="circle"></span>教师活动</h4>
									<textarea name="two_activity[]" rows="5" cols="186" style= "background:transparent">{{item.two_activity}}</textarea>
									<!--<div contenteditable="true" v-html="item.two_activity"></div>-->
								</div>
								<div>
									<h4><span class="circle"></span>学生活动</h4>
									<textarea name="two_s_activity[]" rows="5" cols="186" style= "background:transparent">{{item.two_s_activity}}</textarea>
								</div>
								<div>
									<h4><span class="circle"></span>组织形式</h4>
									<div class="tupian2"><img :src="item.two_img"/></div>
								</div>
							</div>
						</el-collapse-item>
						<el-collapse-item title="教学阶段-基本部分" name="4">
							<div  id ="basic" v-for="item in teacherPlan.basic_part">
								<div class="someTime">
									<span class="time">总时长:</span>
									<input name="three_count_minute" type="text" class="title" v-model="teacherPlan.three_count_minute">
									<span class="time">分钟</span>
								</div>
								<div>
									<h4 class="text-content">标题</h4>
									<input name="three_title[]" type="text" class="title" v-model="item.three_title">
								</div>
								<div>
									<h4><span class="circle"></span>教学内容</h4>
									<textarea name="three_contents[]" cols="186" rows="5" style= "background:transparent">{{item.three_contents}}</textarea>
								</div>
								<div>
									<h4><span class="circle"></span>教师活动</h4>
									<textarea name="three_activity[]" rows="5" cols="186" style= "background:transparent">{{item.three_activity}}</textarea>
									<!--<div contenteditable="true" v-html="item.three_activity"></div>-->
								</div>
								<div>
									<h4><span class="circle"></span>学生活动</h4>
									<textarea name="three_s_activity[]" rows="5" cols="186" style= "background:transparent">{{item.three_s_activity}}</textarea>
								</div>
								<div>
									<h4><span class="circle"></span>组织形式</h4>
									<div class="tupian2"><img :src="item.three_img"/></div>
								</div>
							</div>
						</el-collapse-item>
						<el-collapse-item title="教学阶段-结束部分" name="5">
							<div>
								<div class="someTime">
									<span class="time">总时长:</span>
									<input name="end_count_minute" type="text" class="title" v-model="teacherPlan.end_count_minute">
									<span class="time">分钟</span>
								</div>
								<div>
									<h4><span class="circle"></span>教学内容</h4>
									<textarea name="four_contents" cols="186" rows="5" style= "background:transparent">{{teacherPlanEnd.four_contents}}</textarea>
								</div>
								<div>
									<h4><span class="circle"></span>教师活动</h4>
									<textarea name="four_activity" rows="5" cols="186" style= "background:transparent">{{teacherPlanEnd.four_activity}}</textarea>
								</div>
								<div>
									<h4><span class="circle"></span>学生活动</h4>
									<textarea name="four_s_activity" rows="5" cols="186" style= "background:transparent">{{teacherPlanEnd.four_s_activity}}</textarea>
								</div>
							</div>
						</el-collapse-item>
					</el-collapse>
				</form>
			</div>
		</el-card>
	</div>
</template>
<script>
	import {videoPlayer} from 'vue-video-player'
	export default {
		props: {
			videoUrl: String,
			state: Boolean
			},
		data(){
			return {
				loading:true,
				teacherPlan:[],
				teacherPlanEnd:[],//结束部分教案
				activeName:['1','2','3','4','5'],
				semesterNum:'',//上下学期
				grade_id:'',//年级id
				school_year_id:'',//学年id
				grade_class_id:'',//班级id
				plan_type_id:'',//教案类别id
				plan_id:'',//教案id
				weeks:'',//第几周
				mark:'',//第几节课
				week:'',//星期几
				teacher_params_id:'',//获取教学计划id
				course_id:'',//课程id
				gradeClass:'',//几年级几班
				semester:'',//哪学年哪学期
				class_hour:1,//课时
				currentdate:'',//当前时间
				img:'',
				img2:'',
				img3:'',
				startEnd:'',//周的开始结束时间
			}
		},

		methods:{
			//获取数据
			getAllContent(id){
				this.loading = false
				//获取地址栏参数id
				var id = this.$route.params.id
				this.$http.post('/api/plan/planDetail',{
					id:id
				}).then(res=>{
					this.teacherPlan = res.data.data
					this.teacherPlanEnd = res.data.data.end_part

					this.teacherPlan.start_part.map(item=>{
						this.img = item.one_img
					})
					this.teacherPlan.preparation_part.map(item=>{
						this.img2 = item.two_img
					})
					this.teacherPlan.basic_part.map(item=>{
						this.img3 = item.three_img
					})
				})
			},
			//返回到上一页
			back(){
				this.$router.push({name:'lesson'})
			},
			//获取当前时间
			getNowFormatDate(){
			  var date = new Date();
			  var seperator1 = "-";
			  var year = date.getFullYear();
			  var month = date.getMonth() + 1;
			  var strDate = date.getDate();
			  if (month >= 1 && month <= 9) {
				month = "0" + month;
			  }
			  if (strDate >= 0 && strDate <= 9) {
				strDate = "0" + strDate;
			  }
			  var currentdate = year + seperator1 + month + seperator1 + strDate;
			   this.currentdate = currentdate
			},
			// 'http://pcprograme.tijian121.com/api/course_plan/completeLessonPreparation'
			submit(){
				var token = window.sessionStorage.getItem('token')
				var formParam = $('#test').serialize()
				$.ajax({
					headers:{'token':token},
					url:'http://pcprograme.tijian121.com/api/course_plan/completeLessonPreparation',
					data:'semester='+this.semesterNum+'&grade_id='+this.grade_id+
						 '&school_year_id='+this.school_year_id+'&grade_class_id='+this.grade_class_id+
						 '&plan_type_id='+this.plan_type_id+'&'+formParam+
						 '&class_hour='+this.class_hour+'&plan_id='+this.plan_id+
						 '&class_time='+this.currentdate+'&course_id='+this.course_id+
						 '&mark='+this.mark+'&weeks='+this.weeks+'&week='+this.week+
						 '&teacher_program_id='+this.teacher_params_id+
						 '&weeks_time='+this.startEnd+
						 '&motion='+this.teacherPlan.motion,
					dataType:'json',//服务器返回json格式数据
					type:'post',//HTTP请求类型
					timeout:10000,//超时时间设置为10秒；
					success:function(data){
						if(data.code == 200) {
							alert(data.msg)
							window.history.back(-1);
						}else if(data.errorCode == 400) {
							alert(data.msg)
						}

					},
				});
			}
		},

		created(){
			this.getAllContent()
			this.getNowFormatDate()
			//获取lesson传的上下学期
			this.semesterNum = localStorage.getItem('semesterNum')
			//获取lesson传的年级id
			this.grade_id = localStorage.getItem('gradeId')
			//获取lesson传的几年级几班
			this.gradeClass = localStorage.getItem('gradeClass')
			//获取lesson传的学年id
			this.school_year_id = localStorage.getItem('school_year_id')
			//获取lesson传的学年学期
			this.semester = localStorage.getItem('semester')
			//获取lesson传的班级id
			this.grade_class_id = localStorage.getItem('grade_class_id')
			//获取lesson传的教案类别id
			this.plan_type_id = localStorage.getItem('plan_type_id')
			//获取lesson传的教案id
			this.plan_id = localStorage.getItem('plan_id')
			//获取lesson传的第几周
			this.weeks = localStorage.getItem('weeks')
			//获取lesson传的星期几
			this.week = localStorage.getItem('week')
			//获取lesson传的第几节课
			this.mark = localStorage.getItem('mark')
			//获取lesson传的教学计划id
			this.teacher_params_id = localStorage.getItem('teacher_params_id')
			//获取lesson传的课程id
			this.course_id = localStorage.getItem('course_id')
			//获取周的开始结束时间
			this.startEnd = localStorage.getItem('startEnd')
		}
	}
</script>


<style>
	.el-main {
		padding: 0;
	}
	.el-card__header {
		padding:0 !important;
	}
	.el-card__body {
		padding: 0 20px !important;
	}
	.el-collapse-item__header{
	 	height: 30px !important;
	 	background-color:#9cbf83 !important;
	 	padding-left: 20px !important;
	 	color: #000000 !important;
	 	font-weight: 700 !important;
	 	font-size: 16px !important;
	  }
</style>
<style lang="less" scoped>
	.box-card {
		.header {
			padding: 0;
			height: 50px;
			line-height: 50px;
			background-color: #dbdbdb;
			.header-teaching {
				display: inline-block;
			  	background:#00b02d;
			  	padding: 0 20px;
			  	color:#fff;
			}
			.head {
				padding-left: 20px;
				font-weight: 700;
			}
			.back {
				display: inline-block;
				background-color: #9cbf83;
				padding: 0 15px;
				border-radius: 5px;
				cursor: default;
				color: #fff;
			}
		}
		.top-teaching {
			height: 50px;
			line-height: 50px;
			position: relative;
			.head {
				font-weight: 700;
				.head-content {
					color: #00b02d;
					padding: 0  20px;
				}
			}
			.top-grade {
				padding: 0 10px;
				font-size: 14px;
			}
			.nowData{
				font-size: 14px;
				padding: 0 10px;
			}
			.export {
				position: absolute;
				display: block;
				right: 130px;
				top: 10px;
				padding: 5px 5px;
				background-color: #409EFF;
				border:0px;
				color: #fff;
				border-radius: 3px;
				height: 18px;
				line-height: 18px;
			}
			.top-homework {
				position: absolute;
				right: 50px;
				top: 10px;
				padding: 7px 10px;
				background-color: #409EFF;
				border:0px;
				color: #fff;
				border-radius: 3px;

			}
		}
		.text {
			h4 {
				padding:5px 0;
				.circle {
				  	display: inline-block;
				  	width: 8px;
				  	height: 8px;
				  	background: #666666;
				  	border-radius: 4px;
				  	margin-right:10px;
				}
			}
			textarea {
				width: 98%;
				padding: 5px;
				overflow-y:visible;
			}
			.text-content {
				color: #00b02d;
				font-weight: 700;
				display: inline-block;
				padding: 10px 0;
				font-size: 16px;
			}
			.title{
				height: 30px;
			}
			.someTime {
				.time {
					display: inline-block;
					font-size: 20px;
					font-weight: 600;
					margin-top: 10px;
				}
				.title {
					width: 50px;
					height: 25px;
				}
			}

			.tupian, .tupian2 {
				width: 200px;
				img {
					width: 200px;
				}
			}
		}
	}
	.biao {
		width: 100%;
		background-color: #fff;
		table {
			border: 1px solid #666;
			width: 90%;
			height: 100px;
		}
	}

</style>
